<template>
	<view class="charging">
		<chooseDate @onChange="dateChange" />
		<view class="content-card" v-for="(item, i) in list" :key="i">
			<view class="content-left">
				<image :src="item.image_url">
					<text class="date">{{item.time}}</text>
				</image>
			</view>
			<view class="content-right">
				<text class="charge">{{item.order_status}}</text>
				<text class="cash"><text>￥</text>{{item.money}}</text>
			</view>
		</view>
		<!-- <view class="content-card">
			<view class="content-left">
				<image src="http://119.29.128.238/images/mini_program/clock.png">
					<text class="date">03-13</text>
					<text>13:36</text>
				</image>
			</view>
			<view class="content-right-color">
				<text class="charge">退款</text>
				<text class="cash">￥99.00</text>
			</view>
		</view> -->
		<view v-show="isLoadMore">
			<view class="status">{{loadStatus}}</view>
		</view>
	</view>
</template>
<script>
	import chooseDate from "../../components/chooseDate.vue"
	import { post } from "../../api/index.js"
	import paths from "../../config/path.js"
	export default {
		components: {
			chooseDate
		},
		data() {
			return {
				list: [],
				date: "",
				url: "",
				page: 1,
				userData: "",
				loadStatus: "",
				isLoadMore: false
			}
		},
		created() {
			let userData = uni.getStorageSync("userInfo")
			let url = paths.recharge
			let date = this.setDate(new Date())
			this.date = date
			this.url = url
			this.userData = userData
			post(url, {
				userid_locked: userData.userid_locked,
				time: date,
				page_index: this.page
			}).then(res => {
				console.log(res)
				if(res.data.data.list) {
					this.list = this.list.concat(res.data.data.list)
				} else {
					this.isLoadMore = true
					this.loadStatus = '没有更多'
				}
			})
		},
		methods: {
			dateChange(val) {
				this.date = val
				this.page = 1
				post(this.url, {
					userid_locked: this.userData.userid_locked,
					time: val,
					page_index: this.page
				}).then(res => {
					console.log(res)
					if(res.data.data.list) {
						this.list = []
						this.list = this.list.concat(res.data.data.list)
						this.isLoadMore = false
					} else {
						this.list = []
						this.isLoadMore = true
						this.loadStatus = '没有更多'
					}
				})
			},
			setDate(days) {
				let dates = new Date(days)
				let year = dates.getFullYear()
				let month = dates.getMonth()
				month = month > 10 ? ("0" + (month + 1)) : month + 1
				return year + "-" + month
			}
		},
		// 上拉触底
		onReachBottom() {
			if(!this.isLoadMore) {
				this.page = this.page + 1
				post(this.url, {
					userid_locked: this.userData.userid_locked,
					time: this.date,
					page_index: this.page
				}).then(res => {
					console.log(res)
					if(res.data.data.list) {
						if(Number(res.data.data.total) <= this.list.length) {
							this.isLoadMore = true
							this.loadStatus = '没有更多'
						} else {
							uni.showToast({
								icon: 'loading',
								title: '加载中'
							})
							this.isLoadMore = false
							this.list = this.list.concat(res.data.data.list)
						}
					} else {
						this.isLoadMore = true
						this.loadStatus = '没有更多'
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style scoped>
	image {
		width: 25rpx;
		height: 25rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}

	.content-card {
		width: 95%;
		height: 90rpx;
		border-radius: 15rpx;
		background-color: #FFFFFF;
		margin: 30rpx auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 2;
		box-shadow: 1px 1px 2px #808080;
	}

	.content-left {
		margin-left: 30rpx;
		color: #555555;
		font-size: 25rpx;
	}

	.date {
		margin-right: 20rpx;
		vertical-align: middle;
	}

	.content-right {
		margin-right: 30rpx;
		color: #0DA297;
	}

	.content-right-color {
		margin-right: 30rpx;
		color: #FF5661;
	}

	.charge {
		font-size: 20rpx;
	}

	.cash {
		font-weight: bold;
	}
	
	.status {
		margin: 30rpx 0;
		color: #999999;
		text-align: center;
	}
</style>
